<template>
    <div class="log">
        <el-container class="log-container">
            <el-card class="log-card">
                <div class="login-title">
                    <img src="../assets/logoNo.png" class="logo-img" alt="">
                    <h1>总控管理</h1>
                    <span class="text-smaller">Locker Expert</span>
                </div>
                <el-form label-position="right" :model="formLogin" ref="formLogin" :rules="rules" @keyup.native.enter="login">
                    <el-form-item prop="userName">
                        <el-input v-model.trim="formLogin.userName" prefix-icon="fa fa-user-o" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="userPasswd">
                        <el-input v-model.trim="formLogin.userPasswd" type="password" prefix-icon="fa fa-lock" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" class="btn-block" @click="login" autofocus="autofocus">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formLogin: {
                userName: '',
                userPasswd: '',
            },
            rules:{
                userName:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                userPasswd:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max:46, message: '长度在 8 到 46 个字符', trigger: 'blur' },
                ]
            },
        };
    },
    mounted(){
        
    },
    methods: {
        login:function(){
            var errorInfo = this.validateFun();
            if(!errorInfo){
                axios.post('user/login', this.formLogin,{
                    withCredentials:true
                })
                .then( (res)=> {
                    sessionStorage.setItem('user',1); 
                    this.$router.push({ path: '/' });
                })
                .catch( (error)=> {
                    this.$notify.error({title: '错误',message:error||'用户名密码不正确'});
                });
            }else{
                this.$notify({title: '警告', message: errorInfo, type: 'warning',duration:1200});
                return false;
            }
        },
        validateFun:function(){
            var errorInfo=[];
            this.$refs.formLogin.validateField(['userName','userPasswd'],(re)=>{
                if(re){
                    errorInfo.push(re);
                }
            })
            return errorInfo.join('');
        },
    }
}
</script>

<style scoped>
    .log{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #0f1422;
        min-height: 490px;
    }
    .log-container{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .log-card{
        z-index: 9999;
        width:28%;
        padding:0 2% 1%
    }
    .logo-img{
        width:100px;
        height:100px;
        border:2px solid #efc03d;
        border-radius: 50%;
    }
    .login-title{
        margin-bottom:40px; 
        text-align: center;
    }
    .login-title h1{
        letter-spacing: -1px;
        font-size: 29px;
        color: dimgray;
    }
    .login-title span{
        color:#909399
    }
    .btn-block{
        width: 100%
    }
</style>


